<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--><html lang="en" class="no-js"><!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>{$seoInfo['title']}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="{$seoInfo['description']}" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="{$Think.const.JS_URL}assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="{$Think.const.JS_URL}assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="{$Think.const.JS_URL}assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="{$Think.const.JS_URL}assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="{$Think.const.JS_URL}assets/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="{$Think.const.CSS_URL}common.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
	
	<!-- BEGIN MAIN LAYOUT -->
	<!-- Header BEGIN -->
    <header class="page-header">
        <nav class="navbar navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="toggle-icon">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </span>
                    </button>
                    <a class="navbar-brand" href="#intro">
                        <img class="logo-default" src="{$Think.const.IMG_URL}logo-small.png" alt="Logo">
                        <img class="logo-scroll" src="{$Think.const.IMG_URL}logo-small.png" alt="Logo">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                        <li class="page-scroll active">
                            <a href="#">{$Think.lang.text_save_to_desktop}</a>
                        </li>
                        <!-- <if condition="$user['uid']"> -->
                        <li class="page-scroll">
                        	<a href="#profileFormDiv" data-toggle="modal">{$user['username']}</a>
                        </li>
                        <li class="age-scroll">
                        	<a href="{:U('User/logout')}">{$Think.lang.button_quit}</a>
                        </li>
                        <!-- <else /> -->
                        <li class="page-scroll">
                            <a href="#loginFormDiv" data-toggle="modal">{$Think.lang.button_login}</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#regFormDiv" data-toggle="modal">{$Think.lang.button_register}</a>
                        </li>
                        <!-- </if> -->
                    </ul>
                </div>
                <!-- End Navbar Collapse -->
            </div>
            <!--/container-->
        </nav>
    </header>
    <!-- Header END -->

    <!-- BEGIN MAIN LAYOUT -->
    <div class="page-content">
        <!-- BEGIN FEATURES SECTION -->
        <section id="features">
            <!-- Features BEGIN -->
            <div class="features-bg">
                <div class="container">
			        <div class="row">
			          <!-- Area Charts:Morris -->
			          <div class="col-md-4">
			            <div class="widget-container fluid-height">
			              <div class="heading">
			                <i class="icon-bar-chart"></i>直播室
			              </div>
			              <div class="live-container">
			                  <div class="graph" id="hero-area"></div>
			                  <embed width="100%" height="360" align="middle" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="never" quality="high" src="http://yy.com/s/{$live_id}/yyscene.swf">
			              </div>
			            </div>
			          </div>
			          <!-- Area Charts:Morris --><!-- Chat -->
			          <div class="col-md-8">
				          <div class="col-md-9">
				          	  <div class="widget-container scrollable chat" style="height: 437px;">
				              <div class="heading">
				                <i class="fa fa-comments pull-left"></i>[ {$chat_room_name} ] 聊天室
				                <a href="javascript:void(0);"><i class="fa fa-group pull-right"></i></a>
				              </div>
				              <div class="widget-content padded">
				                <ul id="chat-content"></ul>
				              </div>
				              <div class="post-message">
				              	<form name="chatForm" id="chatForm">
				              	<input type="hidden" id="roomid" name="roomid" value="{$roomid}" />
				              	<textarea name="postMessage" id="postMessage" class="message-control" cols="55" rows="2" placeholder="请输入您需要发送的信息…"></textarea>
				              	<!-- <input type="text" class="message-control" id="postMessage" name="" value="" placeholder="请输入您需要发送的信息…"  /> -->
				                <input type="button" name="postmeg" value="发送" onclick="setContent();"/>
				                </form>
				              </div>
				            </div>
				          </div>
				          <div class="col-md-3">
				          	<div class="widget-container fluid-height">
				              <div class="heading">
				                <i class="icon-bar-chart"></i>在线成员 (<span id="usertotal">0</span>)
				              </div>
				              <div class="member-content">
				              	<div class="portlet-body">
				              		<ul id="memberlist"></ul>
				              	</div>
				              </div>
				            </div>
				          </div>
			          </div>
			          <!-- End Chat -->
			        </div>
                    <!-- End Features -->
				</div>
            </div>
            <!-- Features END -->
        </section>
        <!-- END FEATURES SECTION -->

        <!-- BEGIN CONTACT SECTION -->
        <section id="contact">
            <!-- Footer Coypright -->
            <div class="footer-copyright">
                <div class="container">
                    <P>&copy; <?php echo date('Y'); ?> {$seoInfo['title']}</P>
                </div>
            </div>
            <!-- End Footer Coypright -->
        </section>
        <!-- END CONTACT SECTION -->
    </div>
    <!-- END MAIN LAYOUT -->
    <div id="loginFormDiv" class="modal fade" tabindex="-1" data-width="400">
    	<form name="loginForm" id="loginForm" action="">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">{$Think.lang.text_user_login}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<div class="input-icon input-xlarge margin-top-10">
									<i class="fa fa-user"></i>
									<input type="text" name="username" value="" placeholder="{$Think.lang.text_username}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-lock"></i></span>
									<input type="password" name="password" value="" placeholder="{$Think.lang.text_password}" class="form-control" />
								</div>
							</div>
							<!-- <if condition="C('ADMIN_VERIFY')"> -->
							<div class="form-group">
								<div class="input-icon input-medium margin-top-10">
									<i class="fa fa-barcode"></i>
									<input type="text" class="form-control login-captcha" name="captcha" autocomplete="off" placeholder="{$Think.lang.text_captcha}" />
								</div>
								<img class="img-responsive login-captcha" style="cursor:pointer;" onclick="this.src='{:U('User/verify')}&'+Math.random()" src="{:U('User/verify')}" />
							</div>
							<!-- </if> -->
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" name="dosubmit" class="btn red" onclick="login();">{$Think.lang.button_submit}</button>
					<button type="button" data-dismiss="modal" class="btn">{$Think.lang.button_close}</button>
				</div>
			</div>
		</div>
		</form>
	</div>
	<!-- 注册框 -->
	<div id="regFormDiv" class="modal fade" tabindex="-1" data-width="400">
		<form name="regForm" id="regForm" action="">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">{$Think.lang.text_user_register}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<div class="input-icon input-xlarge margin-top-10">
									<i class="fa fa-user"></i>
									<input type="text" name="username" value="" placeholder="{$Think.lang.text_username}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-icon input-xlarge margin-top-10">
									<i class="fa fa-user"></i>
									<input type="text" name="realname" value="" placeholder="{$Think.lang.text_realname}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-lock"></i></span>
									<input type="password" name="password" value="" placeholder="{$Think.lang.text_password}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-check"></i></span>
									<input type="password" name="repwd" value="" placeholder="{$Think.lang.texst_retype_new_password}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
									<input type="text" name="email" value="" placeholder="{$Think.lang.text_email}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-comment"></i></span>
									<input type="text" name="qq" value="" placeholder="{$Think.lang.text_qq}" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group input-xlarge margin-top-10">
									<span class="input-group-addon"><i class="fa fa-mobile"></i></span>
									<input type="text" name="mobile" value="" placeholder="{$Think.lang.text_mobile}" class="form-control" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" name="dosubmit" class="btn red" onclick="regist();">{$Think.lang.button_submit}</button>
					<button type="button" data-dismiss="modal" class="btn">{$Think.lang.button_close}</button>
				</div>
			</div>
		</div>
		</form>
	</div>
	<!-- 个人资料 -->
	<div id="profileFormDiv" class="modal fade" tabindex="-1" data-width="400">
		<form name="profileForm" id="profileForm" action="">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">{$Think.lang.text_user_profile}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<table class="table table-bordered">
								<tbody>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_username}</label>
									</td>
									<td>
										<input type="text" class="form-control" name="username" value="{$user['username']}" disabled="disabled" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_realname}</label>
									</td>
									<td>
										<input type="text" class="form-control" name="realname" value="{$user['realname']}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_current_assword}</label>
									</td>
									<td>
										<input type="password" class="form-control" name="oldpwd" value="" placeholder="{$Think.lang.text_password_keep_empty}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_new_password}</label>
									</td>
									<td>
										<input type="password" class="form-control" name="newpwd" value="" placeholder="{$Think.lang.text_password_keep_empty}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.texst_retype_new_password}</label>
									</td>
									<td>
										<input type="password" class="form-control" name="repwd" value="" placeholder="{$Think.lang.text_password_keep_empty}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_email}</label>
									</td>
									<td>
										<input type="text" class="form-control" name="email" value="{$user['email']}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_mobile}</label>
									</td>
									<td>
										<input type="text" class="form-control" name="mobile" value="{$user['mobile']}" />
									</td>
								</tr>
								<tr>
									<td>
										<label class="control-label">{$Think.lang.text_qq}</label>
									</td>
									<td>
										<input type="text" class="form-control" name="qq" value="{$user['qq']}" />
									</td>
								</tr>
							</tbody>
						</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" name="dosubmit" class="btn red" onclick="update();">{$Think.lang.button_submit}</button>
					<button type="button" data-dismiss="modal" class="btn">{$Think.lang.button_close}</button>
				</div>
			</div>
		</div>
		</form>
	</div>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="{$Think.const.JS_URL}assets/plugins/respond.min.js"></script>
<script src="{$Think.const.JS_URL}assets/plugins/excanvas.min.js"></script> 
<![endif]-->
<script src="{$Think.const.JS_URL}jquery.min.js" type="text/javascript"></script>
<script src="{$Think.const.JS_URL}assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> 
<script src="{$Think.const.JS_URL}assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="{$Think.const.JS_URL}assets/plugins/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$Think.const.JS_URL}assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript" ></script>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{$Think.const.JS_URL}assets/scripts/app.js" type="text/javascript"></script>
<script src="{$Think.const.JS_URL}jquery.artDialog.js?skin=blue" type="text/javascript"></script>
<script src="{$Think.const.JS_URL}iframeTools.js" type="text/javascript"></script>   
<script>
function login(){
	var log_data=$("#loginForm input").map(function(){
		  return ($(this).attr("name")+'='+$(this).val());
		}).get().join("&") ;
	$.ajax({
	   type: "POST",
	   url: "{:U('User/doLogin')}",
	   data: log_data,
	   success: function(data){
		  data = eval("("+data+")");
		  alert(data.msg);
		  if (data.code == 1){
			  location.reload();
		  }
	   }
	});
}
function regist(){
	var reg_data=$("#regForm input").map(function(){
		  return ($(this).attr("name")+'='+$(this).val());
		}).get().join("&") ;
	$.ajax({
	   type: "POST",
	   url: "{:U('User/register')}",
	   data: reg_data,
	   success: function(data){
		   data = eval("("+data+")");
		   alert(data.msg);
		   if (data.code == 1){
			   location.reload();
		   }
	   }
	});
}
function update(){
	var update_data = $("#profileForm input").map(function(){
		  return ($(this).attr("name")+'='+$(this).val());
	}).get().join("&") ;
	$.ajax({
		   type: "POST",
		   url: "{:U('User/profile')}",
		   data: update_data,
		   success: function(data){
			   data = eval("("+data+")");
			   alert(data.msg);
			   if (data.code == 1){
				   location.reload();
			   }
		   }
		});
}
var onlineuptime;
window.clearInterval(onlineuptime);
onlineuptime = setInterval(useronline, '{$offline_time} / 2 * 1000');
function useronline(){
	$.ajax({
		url:"{:U('Index/setUserOnline',array('roomid'=>$roomid))}",
		type: "GET",
		ifModified:true,
		async:false,
		success: function(d){
			d = eval("("+d+")");  
			$("#memberlist").html(d);
		}
	});
}
var chattime;
window.clearInterval(chattime);
chattime = setInterval(chatflash, 3000);
function chatflash(){
	$.ajax({
		url:"{:U('Index/getChatContent',array('roomid'=>$roomid))}",
		type: "GET",
		ifModified:true,
		success: function(data){
			data = eval("("+data+")");
			if(data != '' ){
				$('#chat-content').html(data);
				$('.widget-content').slimScroll({height:'317px', start:'bottom'});
			}
		}
	});
}
function setContent(){
	var content = $('#postMessage').val();
	$.ajax({
		url:"{:U('Index/publishContent')}",
		type: "POST",
		data: {content:content, roomid:$('#roomid').val()},
		ifModified:true,
		async:false,
		success: function(datas){
			datas = eval("("+datas+")");
			if(datas.code == 0){
				art.dialog.tips(datas.msg);
			}else if(datas.code == 1){
				$('#chat-content ul').append(datas.content);
				$('#postMessage').val('');
				$('.widget-content').slimScroll({scrollTo:'bottom'});
			}
		}
	});
}
</script>
<!-- END JAVASCRIPTS -->
</body>

<!-- END BODY -->
</html>